<template>
  <div>
    <div>这是详情页面 - {{ id }}</div>
    <!-- <router-link to="/detail/9999">
      <button>猜你喜欢</button>
    </router-link> -->
    <button @click="guess">猜你喜欢</button>
  </div>
</template>

<script>
export default {
  props: ["id"],
  // data() {
  //   return {
  //     id: "",
  //   };
  // },
  // created() {
  // this.$route表示当前页面的路由信息
  // console.log(this.$route.params.id);
  //   this.id = this.$route.params.id;
  // },
  // 详情页到详情页，组件会进行复用（不会销毁和重新创建了），为了提高性能
  // watch: {
  //   // 监听到路由参数的改变
  //   $route(to) {
  //     // console.log("url改变了");
  //     // console.log(to);
  //     // console.log(from);
  //     // to和from都是表示新旧页面的路由信息
  //     this.id = to.params.id;
  //   },
  // },
  methods: {
    guess() {
      // this.$router表示的是路由实例
      // this.$route表示当前页面的路由信息
      // console.log(this.$router);

      // 编程式导航，用js来实现路由的跳转
      // 当跳转需要用到逻辑处理的时候，使用编程式导航更加方便
      // router-link是使用高亮的时候更加方便

      // push方法是追加，可以后退的
      // replace方法是替换，不能后退的
      // this.$router.push("/detail/9999");
      // this.$router.replace("/detail/9999");
      // this.$router.go(-2)

      this.$router.push({ name: "detail", params: { id: 9999 } });
    },
  },
};
</script>
